<template>
  <a-modal v-model:open="isShow" title="绑定柜号" @cancel="handleCancel" style="width: 700px">
    <a-spin :spinning="btnLoading">
      <a-form ref="form" :model="formState" :rules="rules" style="margin-top: 30px" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="提单号">
          {{bookingNo}}
        </a-form-item>
        <a-form-item label="柜号" name="containerNo">
          <a-input v-model:value="formState.containerNo" placeholder="请输入柜号" />
        </a-form-item>
      </a-form>
    </a-spin>
    <template #footer>
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" :loading="btnLoading" @click="handleOk">确定</a-button>
    </template>
  </a-modal>
</template>
<script setup>
import { ref, computed,reactive, defineProps } from 'vue'
import {message} from "ant-design-vue";
import {editShippingTrack} from "@/api/firstShipping/shippingMessage.js";

const props = defineProps({
  openTie:{
    type: Boolean,
    default: false
  },
  Id:{
    type: String,
  },
  bookingNo:{
    type: String,
  }
})
const emit = defineEmits(['close'])
const form = ref()
const formState = reactive({
  containerNo:''
})
const btnLoading = ref(false)
const isShow = computed(() => {
  return props.openTie
})
const rules = {
  containerNo:[{
    required: true,
    message: '请输入柜号'
  },
    {
      pattern: /^[A-Z]{4}\d{7}$/,
      message: '柜号格式错误'
    }]
}
const handleCancel = () => {
  emit('close')
}
const handleOk = async () => {
  try{
    const validate = form.value.validate()
    btnLoading.value = true
    const res = await editShippingTrack({
      id: props.Id,
      containerNo: formState.containerNo,
      bookingNo: props.bookingNo
    })
    message.success('绑定柜号成功')
    emit('close')
  }catch (e) {
    message.error(e)
  }finally {
    btnLoading.value = false
  }
}

</script>
<style scoped>

</style>
